<template>
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <el-row>
                <el-page-header @back="goBack" content="文章页面"/>
            </el-row>
        </el-header>
        <el-main>
            <el-form ref="form" :model="article" label-width="80px" :rules="rules">
                <el-form-item label="文章名称">
                    <el-input
                            v-model="article.articleName"
                            v-bind:disabled="edit"
                            prop="articleName"
                    ></el-input>
                </el-form-item>
                <el-form-item label="文章标签">
                    <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            v-bind:closable="!edit"
                            :disable-transitions="false"
                            @close="handleClose(tag)"
                            prop="dynamicTags"
                    >
                        {{ tag }}
                    </el-tag>
                    <div v-if="!edit">
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter="handleInputConfirm"
                                @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button
                                v-else
                                class="button-new-tag"
                                size="small"
                                v-bind:disabled="edit"
                                @click="showInput"
                        >+ New Tag
                        </el-button
                        >
                    </div>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input
                            v-model="article.articleType"
                            prop="articleType"
                            disabled
                    ></el-input>
                </el-form-item>
                <div v-if="!edit">
                    <vue-markdown-editor v-model="content"></vue-markdown-editor>
                </div>
                <div v-if="edit">
                    <vue-marked :value="content"></vue-marked>
                </div>
                <div v-if="!edit">
                    <el-affix position="bottom" :offset="50">
                        <el-form-item>
                            <el-button
                                    type="primary"
                                    @click="onSubmit(article, content, dynamicTags)"
                            >立即创建
                            </el-button
                            >
                            <el-button @click="goBack">取消</el-button>
                        </el-form-item>
                    </el-affix>
                </div>
            </el-form>
        </el-main>
    </el-container>
</template>
<script>
    import marked from "marked";
    import {ElMessage} from "element-plus";
    import ArticleApi from "/src/assets/api/articleApi";

    export default {
        name: "Article",
        data() {
            let obj = this.$route.params.articleStr
                ? JSON.parse(this.$route.params.articleStr)
                : {};
            let edit = this.$route.params.edit ? edit : obj.id;
            let tags = obj.articleTag ? obj.articleTag.split(",") : [];
            if (tags.length > 0) {
                tags = tags.filter((e) => e.trim().length != 0);
            }
            if (!obj.articleType) {
                obj.articleType = "思维火花"
            }
            return {
                article: obj,
                content: obj.articleMdContent ? obj.articleMdContent : "",
                edit: edit,
                dynamicTags: tags,
                inputVisible: false,
                inputValue: "",
                rules: {
                    articleName: [
                        {required: true, message: "请输入活动名称", trigger: "change"},
                        {
                            min: 5,
                            max: 50,
                            message: "长度在 5 到 50 个字符",
                            trigger: "blur",
                        },
                    ],
                    dynamicTags: [
                        {
                            type: "array",
                            required: true,
                            message: "请至少添加一个标签",
                            trigger: "change",
                        },
                    ],
                    content: [
                        {required: true, message: "请选择活动资源", trigger: "blur"},
                        {min: 20, message: "请最少写20个字", trigger: "blur"},
                    ],
                    articleType: [
                        {required: true, message: "请填写文章类型", trigger: "blur"},
                    ],
                },
            };
        },
        compute: {},
        methods: {
            goBack() {
                this.$router.push("/articleList");
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(() => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = "";
            },
            async dealSaveAndUpdateParams(article, content, dynamicTags) {
                let articleTag = "";
                for (let i = 0; i < dynamicTags.length; i++) {
                    articleTag += dynamicTags[i] + ",";
                }
                article.articleTag = articleTag;
                article.articleContent = content ? marked(content) : "";
                article.articleMdContent = content;
                if (articleTag.length == 0) {
                    ElMessage.error("标签不能为空");
                    return;
                }
                if (content.trim().length == 0) {
                    ElMessage.error("正文不能为空");
                    return;
                }
                const res = await ArticleApi.saveOrUpdate(this, article);
                if (res) {
                    this.$router.push("/articleList");
                }
            },
            onSubmit(article, content, dynamicTags) {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        this.dealSaveAndUpdateParams(article, content, dynamicTags);
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>